<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>用户编辑框</title>
</head>
<body>
	<div id="one">
		<form class="layui-form">
			<fieldset class="layui-elem-field layui-field-title"
				style="margin-top: 10px;">
				<legend>信息查询 </legend>
			</fieldset>
			<div class="layui-form-item">
				<label class="layui-form-label">用户ID</label>
				<div class="layui-input-block">
					<input type="text" name="id" lay-verify="title" autocomplete="off"
						placeholder="请输入ID" class="layui-input" id="id">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn layui-btn-small" lay-submit=""
						lay-filter="query">确定</button>
					<button type="reset"
						class="layui-btn layui-btn-primary layui-btn-small">重置</button>
				</div>
			</div>
		</form>
	</div>
	<div id="two" class="layui-hide">
		<fieldset class="layui-elem-field layui-field-title"
			style="margin-top: 10px;">
			<legend>信息修改</legend>
		</fieldset>
		<form class="layui-form" id="query-form">
			<div id="hidebtn" class="layui-hide"></div>
			<div class="layui-form-item">
				<label class="layui-form-label">用户ID</label>
				<div class="layui-form-mid" id="userid">10086</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">用户名</label>
				<div class="layui-form-mid" id="username">example</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">部门</label>
				<div class="layui-input-inline">
					<select name="department" id="department">
						<option value="">请选择部门</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">角色</label>
				<div class="layui-input-block" id="role">
					<input type="checkbox" name='admin' title='admin' checked>
				</div>
			</div>
			<div>
				<div class="layui-form-item">
					<label class="layui-form-label">锁定</label>
					<div class="layui-input-block" id="locked">
						<input type="checkbox" name="locked" lay-skin="switch" title="开关">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn layui-btn-small" lay-submit=""
						lay-filter="demo2">提交</button>
					<button type="reset"
						class="layui-btn layui-btn-primary layui-btn-small">重置</button>
				</div>
			</div>
		</form>
	</div>
	<script type="text/javascript" src="plugins/layui/layui.js"></script>
	<script>
		layui.use([ 'form' ], function() {
			var form = layui.form(),
				$ = layui.jquery,
				layer = layui.layer;
	
			//保存查询出的role表
			var curole = [],
				norepeat = {},
				//保存查询出的department表
				cudepartment = [];
	
			//曲线救国
			if ($('#hidebtn').html() != null && $('#hidebtn').html() != '') {
				query($('#hidebtn').html());
			}
	
			//监听更改提交
			form.on('submit(demo2)', function(data) {
				if (JSON.stringify(norepeat) != JSON.stringify(data.field)) {
					var id = $('#userid').html();
					var json = {
						"id" : id,
						"name" : $('#username').html(),
						"locked" : false,
						"role" : [],
						"department" : {}
					};
					for (var i in data.field) {
						if (i != 'locked') {
							for (var j in curole) {
								if (curole[j].name == i) {
									json.role.push(curole[j]);
								}
							}
						} else {
							json.locked = true;
						}
					}
					for (var i in cudepartment) {
						if (cudepartment[i].name == data.field.department) {
							json.department = cudepartment[i];
						}
					}
					norepeat = data.field;
					$.ajax({
						url : 'updateUser/' + id,
						type : "PUT",
						data : JSON.stringify(json),
						async : false,
						dataType : 'json',
						contentType : 'application/json;charset=utf-8',
						success : function(info) {
							layer.msg('修改成功！');
						}
					});
				}
				return false;
			});
	
			//监听查询提交
			form.on('submit(query)', function(data) {
				//防止多次请求
				if (data.field.id != '' && data.field.id != null) {
					query(data.field.id);
					$('#two').removeClass('layui-hide');
					$('#two').addClass('layui-show');
				}
				return false;
			});
	
			//查询
			function query(id) {
				//role名字列表
				var namelist = [],
					//部门名称
					department;
				$.ajax({
					url : 'getUser/' + id,
					type : "GET",
					async : false,
					success : function(info) {
						$('#id').val('')
						$('#userid').html(info.id);
						$('#username').html(info.name);
						if (info.locked == true) {
							$('#locked').html('<input type="checkbox" name="locked" lay-skin="switch" title="开关" checked>')
						} else {
							$('#locked').html('<input type="checkbox" name="locked" lay-skin="switch" title="开关">')
						}
						if(info.department!=null){
							department = info.department.name;
						}
						for (var i in info.role) {
							namelist.push((info.role)[i].name);
						}
					}
				});
				//获取所有角色信息
				$.ajax({
					url : 'allRoles',
					type : "GET",
					async : false,
					success : function(info) {
						$('#role').html('');
						curole = info;
						for (var i in info) {
							name = info[i].name;
							if (contains(namelist, name) == true) {
								$('#role').append('<input type="checkbox" name=' + name + ' title=' + name + ' checked>')
							} else {
								$('#role').append('<input type="checkbox" name=' + name + ' title=' + name + '>')
							}
						}
					}
				});
	
				//加载department
				$.ajax({
					url : 'allDepartments',
					type : "GET",
					async : false,
					success : function(info) {
						cudepartment = info;
						for (var i in info) {
							name = info[i].name;
							if (department == name) {
								$('#department').append('<option value=' + name + ' selected="">' + name + '</option>');
							} else {
								$('#department').append('<option value=' + name + '>' + name + '</option>');
							}
						}
					}
				});
	
				$('#query-form')[0].reset();
			}
	
	
			//判断obj是否在数组arr中
			function contains(arr, obj) {
				var i = arr.length;
				while (i--) {
					if (arr[i] === obj) {
						return true;
					}
				}
				return false;
			}
		});
	</script>
</body>

</html>